<template>
  <div class="my">
    <div class="touxiang">
      <div class="left"><img src="./pages/img/1.png"></div>
      <div class="right">
        <img src="./pages/img/financing.png">
        <p><router-link to="/wrapper">签到</router-link></p>
      </div>
    </div>
    <div class="list">
      <ul>
        <li>
          <img src="../views/pages/img/me.png" alt="">
          <p>完善资料</p>
          <span>></span>
        </li>
        <li>
          <img src="../views/pages/img/like.png" alt="">
          <p>我的收藏</p>
          <span>></span>
        </li>
        <li>
          
          <img src="../views/pages/img/download.png" alt="">
          <router-link to="/my/xiazai"><p>我的下载</p></router-link>
          <span>></span>
        </li>
        <li>
          <img src="../views/pages/img/iphone.png" alt="">
          <p>手机壳DIY</p>
          <span>></span>
        </li>
        <li class="li-my"></li>
        <li>
          <img src="../views/pages/img/rotation.png" alt="">
          <p>原创专栏</p>
          <span>></span>
        </li>
        <li>
          <img src="../views/pages/img/upload.png" alt="">
          <p>上传壁纸</p>
          <span>></span>
        </li>
        <li>
          <img src="../views/pages/img/info.png" alt="">
          <p>关于我们</p>
          <span>></span>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import '../common/less/varible.less';

// scoped 作用域
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
  overflow: hidden;
}

.my {
  font-family: @fontfamily;
  width: 100%;
  overflow: hidden;

  .touxiang {
    overflow: hidden;
    padding: 100px 10px;
    height: 130px;
    width: 95%;
    margin: 0 auto;

    .left img {
      float: left;
      width: 30%;
      border-radius: 50%;
    }

    .right {
      // margin-top: 40px;
      margin-top: -50px;
      float: right;
      height: 40px;
      width: 24%;


      img {
        width: 40%;
      }

      p {
        font-size: 23px;
        margin-top: -23px;
        margin-left: 35px;
      }
    }
  }

  .list {
    overflow: hidden;
    margin-top: 20px;
    width: 100%;

    ul {
      width: 100%;

      li {
        height: 50px;
        width: 90%;
        margin: 0 auto;

        // display: flex;
        // justify-items: center;
        img {
          width: 10%;
        }

        p {
          font-size: 23px;
          margin-top: -26px;
          margin-left: 40px;
        }

        span {
          float: right;
          font-size: 23px;
          margin-top: -26px;
        }

      }

      .li-my {
        height: 8px;
        margin-bottom: 15px;
        width: 100%;
        background-color: #ffffff;
        z-index: 200;
      }
    }
  }
}
</style>
<script>
import { Dialog } from 'vant';
import MoneyView from '@/views/MoneyView.vue';
import WrapperView from '@/views/WrapperView.vue';
import XiazaiView from '@/views/pages/XiazaiView.vue';
export default {

  components: {
        MoneyView,
        WrapperView,
        XiazaiView,
    },

  // 访问这个组件之前的钩子函数
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    // 获取token
    let token = localStorage.getItem("AUTO_TOKEN");
    // 判断是有值
    if (token) {
      next(true);
    }
    else {
      Dialog.confirm({
        title: '您还没登录',
        message: '要跳转到登录页面吗?',
      })
        .then(() => {
          // on confirm （确定）
          next({ path: '/login' })
        })
        .catch(() => {
          // on cancel （取消）
          next(false);
        });
    }
  },
}
</script>